<template>
	<div>
		<show-view-path :parent-views="parentViews" :screenConfig="screenConfig" :chartConfig="chartConfig"  @selectView="selectView"></show-view-path>
		<div style="height: 100%" :ref="config.key"></div>
	</div>
</template>

<script>
import ChartPublic from './chart-public.js';
import ChartStyle from './chart-style.js';

/**
 * 环形图
 */
export default {
	name: "ringChart-view",
	mixins:[ChartPublic,ChartStyle],
	data() {
		return {
			chartType:"pie"
		}
	},
	methods: {
		setOption(){
			//图例组件
			let legend = [];
			let dimensions = [];
			/**
			 *系列列表
             [{name: 名称,
             type: 类型,
             data: 数据 []
             }]
			 */
			let series = [];

			//静态数据模式
			if(this.config.dataSources.source=="static") {
				if (this.config.dataSources.staticData) {
					//静态数据
					let staticData = JSON.parse(this.config.dataSources.staticData);
					for (let i = 0; i < staticData.length; i++) {
						if (staticData[i].name) {
							legend.push(staticData[i].name);
						}
					}
					let obj = {
						name: this.config.title,
						type: this.chartType,
						data: staticData,
					}
					//环形图大小
					let radius = this.config.styles.pieConfig.radius.split(',');
					if(radius && radius.length ==2){
						obj['radius'] = radius;
					}
					series = [obj];
				}
			}else {
				dimensions=this.getDimensions();
				//获取度量
				for (let i = 0; i < this.config.dataSources.measures.length; i++) {
					let array=[];
					let measure = this.config.dataSources.measures[i];
					let fieldName=measure.tableName?measure.tableName+'_'+measure.fieldName:measure.fieldName;
					legend.push(measure.fieldLabel);
					for (let j = 0; j < this.data.length; j++) {
						let value= this.data[j][fieldName];
						if(value){
							array.push({
								value:value,
								name:dimensions.data[j]
							});
						}else {
							array.push({
								value:0,
								name:dimensions.data [j]
							});
						}
					}
					let obj={
						name: measure.fieldLabel,
						type:this.chartType,
						data:array,
					}
					//环形图大小
					let radius = this.config.styles.pieConfig.radius.split(',');
					if(radius && radius.length ==2){
						obj['radius'] = radius;
					}
					//饼图标签属性
					let itemStyle = {
						normal:{
							label:{
								show: this.config.styles.pieConfig.show || false,
								textStyle:{},

							}
						}
					}
					if(this.config.styles.pieConfig){
						itemStyle.normal.label.textStyle['fontSize']=this.config.styles.pieConfig.fontSize;
						itemStyle.normal.label.textStyle['color']=this.config.styles.pieConfig.fontColor;
						itemStyle.normal.label['position'] = this.config.styles.pieConfig.position;
						let formatter = '';
						if(this.config.styles.pieConfig.showName){
							formatter = '{b}'
						}
						if(this.config.styles.pieConfig.showValue){
							formatter = formatter+' {c}'
						}
						if(this.config.styles.pieConfig.showPercentage){
							formatter = formatter+' ({d}%)'
						}
						itemStyle.normal.label['formatter']=formatter;
					}
                    obj['itemStyle']=itemStyle;
					let center = this.config.styles.pieConfig.center.split(',');
					if(center && center.length ==2){
						obj['center'] = center;
					}
					series.push(obj);
				}
			}
			let tooltip = this.chartTooltip()
			tooltip.trigger = 'item';
			this.option={
				tooltip:tooltip,//提示框的样式修改
				grid:this.chartGrid(),//grid离容器的边距设置
				toolbox:this.chartToolbox(),//工具栏目配置
				color:this.getColors(),
				legend: this.chartLegend(legend,true),//图例
				series: series
			};

		}
	},
}
</script>

<style scoped>
</style>
